<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

    <style>
        .box{
            width: 520px;
            height: 280px;
            /* border: 4px solid rgba(186, 187, 194, 0.6); */
            margin: 50px auto;
            position: relative;
        }

        .inner{
            width: 520px;
            /* overflow-x: scroll; */
            overflow-x: hidden;
            scroll-margin-left: 50px;
            
        }
        .con{
            width: 2600px;
            height: 100%;
            overflow: hidden;
        }
        .con>img{
            width: 520px;
            height: 280px;
            float: left;
        }

        /* 修改list的样式 */
        .list{
            overflow: hidden;
            list-style: none;
            position: absolute;
            bottom: 1px;
            left: 68px;
        }
        .list>li{
            width: 30px;
            height: 8px;
            background-color: rgb(163,163,163);
            float: left;
            margin-left: 40px;
        }
        .list>li.active{
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="inner">
            <div class="con">
                <img src="./image/0.jpg" alt="">
                <img src="./image/1.jpg" alt="">
                <img src="./image/2.jpg" alt="">
                <img src="./image/3.jpg" alt="">
                <img src="./image/4.jpg" alt="">
            </div>

            <ul class="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
           
        </div>
    </div>
</body>

<script>
    //获取照片元素
    var imgs_ = document.getElementsByTagName('img');
    var inner_ = document.getElementsByClassName('inner')[0];
    var lis =document.getElementsByTagName('li');
    //自动执行的时间
    var timer = null;
    var timer2 = null;//执行每一步的间隔函数
    var x = 0; //每张图片的下标
    function autoMove(){
        timer = setInterval(function(){
            x++;
            //图片下标不能大于图片的个数
            if(x>=imgs_.length){
                x = 0;
            }
            //动起来
            var step = 0;//初始化步数
            var maxStep = 20; //最大20步走完
            var start = inner_.scrollLeft;//起始位置
            var end = imgs_[0].offsetWidth * x; //结束位置
            var everyStep = (end - start) / maxStep; //执行每一步的步长
            
            timer2 = setInterval(function(){
                step++;
                if(step>=maxStep){
                    step = 0;
                    clearInterval(timer2);
                }
                start += everyStep;
                inner_.scrollLeft = start;
            },15)

            for(var i =0;i<lis.length;i++){
                lis[i].className='';
            }
            lis[x].className = 'active';

            lis[x].onclick = function(){
                clearInterval(timer);
            }
            imgs_[x].onclick =function(){
                clearInterval(timer);
            }
            imgs_[x].ondblclick = function(){
                autoMove();
            }
        },2000);
    }

    autoMove();
</script>
</html>